<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:f="http://xmlns.jcp.org/jsf/core"
                xmlns:h="http://xmlns.jcp.org/jsf/html"
                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                template="/WEB-INF/template.xhtml">
    <ui:define name="content">
        <script type="text/javascript">
            function start() {
                PF('startButton1').disable();

                window['progress'] = setInterval(function() {
                    var pbClient = PF('pbClient'),
                            oldValue = pbClient.getValue(),
                            newValue = oldValue + 10;

                    pbClient.setValue(pbClient.getValue() + 10);

                    if (newValue === 100) {
                        clearInterval(window['progress']);
                    }
                }, 1000);
            }

            function cancel() {
                clearInterval(window['progress']);
                PF('pbClient').setValue(0);
                PF('startButton1').enable();
            }
        </script>

        <div class="Container100">
            <div class="ContainerIndent">
                <div class="ShadowBox whiteback RedBorderedBox">
                    <div class="Container50 Responsive50">
                        <div class="Container100">
                            <div class="ContainerIndent">
                                <h1 class="BigTopic">ProgressBar - Client</h1>
                                <p:growl id="progressGrowl" />
                                <h:form>
                                    <p:commandButton value="Start" id="start" type="button" onclick="start()" widgetVar="startButton1"/>
                                    <p:commandButton value="Cancel" id="cancel" type="button" onclick="cancel()" />
                                    <br /><br />
                                    <p:progressBar id="progressBarClient" widgetVar="pbClient" style="width:300px"/>
                                </h:form>
                            </div>
                        </div>
                        <div class="Container100">
                            <div class="ContainerIndent">
                                <h1 class="BigTopic">ProgressBar - Ajax</h1>
                                <h:form>
                                    <p:commandButton value="Start" type="button" onclick="PF('pbAjax').start(); PF('startButton2').disable();" widgetVar="startButton2" />
                                    <p:commandButton value="Cancel" actionListener="#{progressBarView.cancel}" oncomplete="PF('pbAjax').cancel();PF('startButton2').enable();" />
                                    <br /><br />
                                    <p:progressBar widgetVar="pbAjax" ajax="true" value="#{progressBarView.progress}" labelTemplate="{value}%" styleClass="animated" global="false">
                                        <p:ajax event="complete" listener="#{progressBarView.onComplete}" update="progressGrowl" oncomplete="PF('startButton2').enable()"/>
                                    </p:progressBar>
                                </h:form>
                            </div>
                        </div>
                        <div class="Container100">
                            <div class="ContainerIndent">
                                <h1 class="BigTopic">ProgressBar - Static Display</h1>
                                <h:form>
                                    <p:progressBar value="50" labelTemplate="{value}%" displayOnly="true"/>
                                </h:form>
                            </div>
                        </div>
                    </div>
                    <div class="Container50 Responsive50">
                        <div class="ContainerIndent">
                            <h1 class="BigTopic">Galleria</h1>
                            <p:galleria value="#{imagesView.images}" var="image" panelWidth="500" panelHeight="313" showCaption="true">
                                <p:graphicImage name="demo/images/nature/#{image}" alt="Image Description for #{image}" title="#{image}"/>
                            </p:galleria>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="Container100">
            <div class="ContainerIndent">
                <div class="ShadowBox whiteback">
                    <div class="Container25 Responsive100">
                        <div class="ContainerIndent">
                            <h1 class="BigTopic">Clock Sample - Client</h1>
                            <p:clock />
                        </div>
                    </div>
                    <div class="Container25 Responsive100">
                        <div class="ContainerIndent">
                            <h1 class="BigTopic">Clock Sample - Server</h1>
                            <p:clock pattern="yyyy-MM-dd HH:mm:ss" mode="server" />
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </ui:define>
</ui:composition>
